<script lang="ts" setup>
import { useTags } from "~/api/blog";
import { useViews } from "~/api/public";

const { data: views } = await useViews();
const { data: tags } = await useTags();
useHead({
  // title: "雪貂神社",
  meta: [
    {
      name: "description",
      content: "雪貂的博客",
    },
    {
      name: "keywords",
      content:
        "雪貂神社,雪貂,博客,个人博客,前端,后端,全栈,技术,技术博客,ai," +
        tags.value?.data?.join(","),
    },
  ],
});
</script>

<template>
  <div class="homeBody">
    <div>
      <h3>访问量</h3>
      <h1>
        {{ views?.data.toString().padStart(6, "0") }}
        <span style="font-size: 10px">次</span>
      </h1>
    </div>
    <HomeMap class="map"></HomeMap>
    <FriendChain></FriendChain>
  </div>
</template>

<style lang="less" scoped>
@import url("/assets/css/screen.less");
.homeBody {
  display: flex;
  height: calc(100vh - 2rem);
  align-items: center;
  padding: 1rem;
  .media({
    flex-direction: column;
  },phone);
  .map {
    flex: 1;
  }
}
</style>
